import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.12
import qmtt.client.manager 1.0

Item {
    id: loginPage
    width: parent.width
    height: parent.height
    anchors.centerIn: parent
    // 背景图片
    Image {
        anchors.fill: parent
        source: "qrc:/login_background.png"
        fillMode: Image.PreserveAspectCrop  // 等比例拉伸并裁剪超出部分
        clip: true
    }
    // 登录卡片
    Rectangle {
        id: loginCard
        color: "#B2FFFFFF"
        width: parent.width * 0.8
        height: 220
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: (parent.height - height) / 3  // 登录卡片保持上下内边距1:2的关系
        radius: 10
        // 登录信息项
        Item {
            id: loginItem
            width: parent.width * 0.9
            height: parent.height * 0.9
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            Column {
                spacing: 10
                anchors.fill: parent
                // 标题
                Text {
                    id: title
                    width: parent.width
                    height: 40
                    text: "自动浇灌系统"
                    font.pixelSize: 32
                    color: "#000000"
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignTop
                }
                // 用户名输入框（图标+输入区）
                Row {
                    id: usernameRow
                    width: parent.width
                    height: 40
                    Rectangle {
                        color: "transparent"
                        width: 20
                        height: 40
                        Image {
                            id: usernameIcon
                            width: 20
                            height: 20
                            source: "qrc:/username.png"
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.verticalCenter: parent.verticalCenter
                        }
                    }
                    TextField {
                        id: usernameText
                        placeholderText: "用户名"
                        font.pixelSize: 16
                        width: parent.width - 20
                        height: 40
                        padding: 10
                        background: Rectangle {
                            implicitHeight: 40
                            radius: 5
                            border.width: 0
                            color: "transparent"
                        }
                        anchors.bottom: parent.bottom
                        verticalAlignment: Text.AlignBottom
                    }
                }
                // 密码输入框（图标+输入区）
                Row {
                    id: passwordRow
                    width: parent.width
                    height: 40
                    Rectangle {
                        color: "transparent"
                        width: 20
                        height: 40
                        Image {
                            id: passwordIcon
                            width: 20
                            height: 20
                            source: "qrc:/password.png"
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.verticalCenter: parent.verticalCenter
                        }
                    }
                    TextField {
                        id: passwordText
                        placeholderText: "密码"
                        font.pixelSize: 16
                        width: parent.width - 20
                        height: 40
                        padding: 10
                        echoMode: TextInput.Password
                        background: Rectangle {
                            implicitHeight: 40
                            radius: 0
                            border.width: 0
                            color: "transparent"
                        }
                        anchors.bottom: parent.bottom
                        verticalAlignment: Text.AlignBottom
                    }
                }
                // 登录按钮
                Button {
                    width: parent.width
                    height: 40
                    text: "登录/注册"
                    font.bold: true
                    background: Rectangle {
                        color: parent.down ? "#4facfe" : "#00f2fe"
                        radius: 5
                    }
                    onClicked: {
                        var ret = MQTTClientManager.MQTTConnect()
                        console.log(ret)
                        if (ret) {
                            ret = MQTTClientManager.MQTTPublish("a/b", "qml test");
                        }
                    }
                }
                // 注册
            }
        }
    }
    // 登录卡片外边框阴影效果
    DropShadow {
        anchors.fill: loginCard
        source: loginCard
        color: "#80000000"
        radius: 8
        samples: 10
        spread: 0.1
    }
//    // 登录卡片
//    Rectangle {
//        id: loginCard
//        width: parent.width * 0.8
//        height: contentColumn.height
//        color: "white"
//        radius: 10
//        opacity: 0.5
//        anchors.horizontalCenter: parent.horizontalCenter
//        anchors.top: parent.top
//        anchors.topMargin: parent.height * 0.2
//        Column {
//            id: contentColumn
//            anchors.centerIn: parent
//            anchors.bottom: parent.bottom
//            anchors.bottomMargin: 30
//            spacing: 20
//            width: parent.width * 0.8
//            Text {
//                id: title
//                anchors.horizontalCenter: parent.horizontalCenter
//                width: parent.width
//                text: qsTr("自动浇灌系统")
//                font.pixelSize: 32
//                color: "#000000"
//            }
//            // 用户名输入框
//            TextField {
//                id: usernameField
//                width: parent.width
//                placeholderText: "用户名"
//                font.pixelSize: 16
//                background: Rectangle {
//                    implicitHeight: 40
//                    radius: 5
//                    border.color: "#cccccc"
//                    border.width: 1
//                }
//            }
//            // 密码输入框
//            TextField {
//                id: passwordField
//                width: parent.width
//                placeholderText: "密码"
//                echoMode: TextInput.Password
//                font.pixelSize: 16
//                background: Rectangle {
//                    implicitHeight: 40
//                    radius: 5
//                    border.color: "#cccccc"
//                    border.width: 1
//                }
//            }
//            // 登录按钮
//            Button {
//                width: parent.width
//                height: 40
//                text: "登录/注册"
//                font.bold: true
//                background: Rectangle {
//                    color: parent.down ? "#4facfe" : "#00f2fe"
//                    radius: 5
//                }
//                onClicked: {

//                }
//            }
//        }
//    }
//    // 阴影效果
//    DropShadow {
//        anchors.fill: loginCard
//        source: loginCard
//        color: "#80000000"
//        radius: 8
//        samples: 20
//        spread: 0.1
//    }
}
